<script setup>
import {onMounted, ref} from "vue";
import {getCommentList, removeCommentById} from "@/api/comment.js";
import VPage from "@/components/page/VPage.vue";
import dateUtil from "../../../utils/dateUtil.js";
import {ElMessage} from "element-plus";

const totalCount = ref(0);

onMounted(async () => {
  console.log('加载组件...')
  await fetchCommentList();
});

const commentList = ref([]);
const loading = ref(false);
const pagination = ref({
  pageNum: 1,
  pageSize: 20,
  total: 0,
  pages: 0
});
const fetchCommentList = () => {
  loading.value = true;
  const request = {
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize
  };
  getCommentList(request).then(res => {
    const timer = setTimeout(() => {
      commentList.value = res.data?.record;
      pagination.value.total = res.data?.total;
      pagination.value.pages = res.data?.pages;
      totalCount.value = res.data?.total;
      loading.value = false;
      clearTimeout(timer);
    }, 500);
  }).catch((err) => {
    console.log(err);
    loading.value = false;
  });
};

const deleteComment = async (id) => {
  await removeCommentById(id).then(res => {
    ElMessage.success('删除成功');
    fetchCommentList();
  }).catch(err => {
    console.log(err);
  });
};
</script>

<template>
  <div class="v-container" v-loading="loading">
    <div class="v-query v-comment-total">
      评论总数：共 <span>{{ totalCount }}</span> 条评论
    </div>
    <div class="v-container">
      <div class="v-comment-box" v-for="item in commentList" :key="item.id">
        <div>
          <span class="v-name">{{ item.commentator }}</span>
          <template v-if="item?.isReply">
            <span style="color: #409EFF;font-size: 14px;margin: 0 5px 0 0;">回复</span>
            <span class="v-name">{{ '@' + item?.replyCommentator }}</span>
          </template>
          <span class="v-time"
                style="margin: 0 5px;font-size: 12px">{{ dateUtil.formatDate(item.createdTime, 'yyyy-MM-dd') }}</span>
          <span class="v-comment-content">
          <span style="background-color: #E2E2E2;padding: 5px;border-radius: 8px;">评论内容:</span>
          {{ item.content }}
        </span>
        </div>
        <div>
          <span class="v-btn">回复</span>
          <el-popconfirm title="是否删除该评论及其子评论?" @confirm="deleteComment(item?.id)">
            <template #reference>
              <span class="v-btn" style="color: #F56C6C;">删除</span>
            </template>
          </el-popconfirm>
        </div>
      </div>
      <v-page v-model="pagination" @query="fetchCommentList"/>
    </div>
  </div>
</template>

<style scoped>
.v-comment-total {
  font-size: 14px;
  color: #999999;
}

.v-comment-box {
  &:hover {
    border-radius: 4px;
    cursor: pointer;
  }
  
  background-color: #ffffff;
  margin: 10px 0;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  > div {
    display: flex;
    align-items: center;
  }
  
  .v-name {
    font-size: 14px;
    font-weight: bold;
    color: #4F4F4F;
    margin: 0 5px 0 0;
  }
  
  .v-btn {
    color: #409EFF;
    font-size: 13px;
    padding: 5px;
    
    &:hover {
      cursor: pointer;
      background-color: rgba(64, 158, 255, 0.1);
      border-radius: 4px;
    }
  }
  
  .v-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    &::before, &::after {
      width: 5px;
      height: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #999999;
      content: ' ';
    }
    
    &::before {
      margin-right: 5px;
    }
    
    &::after {
      margin-left: 5px;
    }
  }
  
  .v-comment-content {
    font-size: 14px;
  }
}
</style>